<template>
    <div>
      <div class="centered-container">
        <img src="../../../static/线条 1@1x.png" alt="">
        <span style="margin-left: 10px; font-size: 30px; color: #415058; font-weight: bold;">课堂活跃度</span>
        <img src="../../../static/lightning.png" alt="1">
        <img src="../../../static/lightning.png" alt="2">
        <img src="../../../static/lightning.png" alt="3">
      </div>
      <div>
        <img src="../../../static/activeimg.png" alt="1" style="margin-left: 150px;width: 250px;">
        <img src="../../../static/activeimg.png" alt="2" style="margin-left: 130px;width: 250px;">
        <img src="../../../static/activeimg.png" alt="3" style="margin-left: 130px;width: 250px;">
        <div class="activity">
            <span style="margin-left: 200px;">回答问题次数</span>
            <span style="margin-left: 246px;">提问次数</span>
            <span style="margin-left: 256px;">小组活动次数</span>
        </div>
        <div class="time">
            <span style="margin-left: 200px;">13/57</span>
            <span style="margin-left: 280px;">5/30</span>
            <span style="margin-left: 280px;">3/19</span>
        </div>
      </div>
    </div>
</template>

<script>

</script>

<style>
.centered-container {
    display: flex;
    align-items: center;
  }
.activity{
    color: #376ff167;
    font-weight: bold;
    font-size: 25px;
    position: absolute;
    top: 43%;
}
.time{
    color: #042E8C;
    font-weight: bold;
    font-size: 40px;
    position: absolute;
    top: 47%;
}
</style>